Unity横竖滑动列表嵌套（UGUI / ScrollRect）

2023-08-01 08:57| 来源: 网络整理| 查看: 265

文章目录一. 前言二. 实现1. 实现原理2. 制作横竖嵌套滑动列表界面3. 运行Unity进行测试4. CustomScrollRect脚本代码三、答疑

一. 前言

游戏开发过程中，很可能需要制作横竖嵌套的滑动列表。如下效果：在这里插入图片描述 Unity的滑动列表会根据用户的操作行为捕获到对应的事件，但是Unity的事件一旦被上层UI捕获，下层UI就不会响应，如果是嵌套列表，那么二级列表就会劫持掉事件，导致一级列表无法拖动。

二. 实现 1. 实现原理

要解决滑动列表嵌套的这个问题，可以根据用户滑动的方向，来进行事件的透传，比如在横向滑动的区域，如果用户是进行竖向滑动，则把事件透传到父级列表，如果父级列表是竖向滑动列表，则可以进行响应，否则继续透传。

UI事件透传接口:

ExecuteEvents.Execute(GameObject target, BaseEventData eventData, EventFunction functor) where T : IEventSystemHandler; 2. 制作横竖嵌套滑动列表界面

如下，ScrollRect_V为竖向滑动，ScrollRect_H为横向滑动。在这里插入图片描述 ScrollRect_V节点和ScrollRect_H节点要挂CustomScrollRect脚本（脚本代码见文章最下面），并设置好Content对象，根据滑动方向勾选Horizontal或Vertical。 ScrollRect_V节点要挂Rect Mask 2D组件，否则滑动列表没有裁切效果。 ScrollRect_H节点的ChildContent挂上布局组件: Horizontal Layout Group、Content Size Fitter。并创建n个Child精灵图，比如苹果、香蕉之类的。在这里插入图片描述

3. 运行Unity进行测试

运行Unity，即可测试嵌套滑动列表了。

4. CustomScrollRect脚本代码 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems; using UnityEngine.UI; public class CustomScrollRect :ScrollRect { //父CustomScrollRect对象 private CustomScrollRect m_Parent; public enum Direction { Horizontal, Vertical } //滑动方向 private Direction m_Direction = Direction.Horizontal; //当前操作方向 private Direction m_BeginDragDirection = Direction.Horizontal; protected override void Awake() { base.Awake(); //找到父对象 Transform parent = transform.parent; if(parent){ m_Parent = parent.GetComponentInParent(); } m_Direction = this.horizontal ? Direction.Horizontal : Direction.Vertical; } public override void OnBeginDrag(PointerEventData eventData) { if(m_Parent){ m_BeginDragDirection = Mathf.Abs(eventData.delta.x) > Mathf.Abs(eventData.delta.y) ? Direction.Horizontal : Direction.Vertical; if(m_BeginDragDirection != m_Direction){ //当前操作方向不等于滑动方向，将事件传给父对象 ExecuteEvents.Execute(m_Parent.gameObject, eventData, ExecuteEvents.beginDragHandler); return; } } base.OnBeginDrag(eventData); } public override void OnDrag(PointerEventData eventData) { if (m_Parent) { if (m_BeginDragDirection != m_Direction){ //当前操作方向不等于滑动方向，将事件传给父对象 ExecuteEvents.Execute(m_Parent.gameObject, eventData, ExecuteEvents.dragHandler); return; } } base.OnDrag(eventData); } public override void OnEndDrag(PointerEventData eventData) { if (m_Parent){ if (m_BeginDragDirection != m_Direction){ //当前操作方向不等于滑动方向，将事件传给父对象 ExecuteEvents.Execute(m_Parent.gameObject, eventData, ExecuteEvents.endDragHandler); return; } } base.OnEndDrag(eventData); } public override void OnScroll(PointerEventData data) { if (m_Parent){ if (m_BeginDragDirection != m_Direction){ //当前操作方向不等于滑动方向，将事件传给父对象 ExecuteEvents.Execute(m_Parent.gameObject, data, ExecuteEvents.scrollHandler); return; } } base.OnScroll(data); } } 三、答疑

更新（2021-4-7）有同学私信我说没做出来，在这里插入图片描述

于是今天我重新写了一篇文章，并附上Demo工程，感兴趣的同学可以进行阅读学习。《Unity UGUI实现横竖嵌套列表ScrollView（利用事件透传），含Demo工程》在这里插入图片描述完毕。喜欢Unity的同学，不要忘记点击关注，如果有什么Unity相关的技术难题，也欢迎留言或私信~

【本文地址】

公司简介

联系我们